<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Password Generator</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&family=Dancing+Script&family=Exo&family=Fira+Sans:wght@300&family=Lato&family=Lobster&family=Playfair+Display&family=Quicksand&display=swap');
        *{
            font-family:Quicksand;
        }
        header{
            color: tomato;
            font-size: 3rem;
            background-color: #444;
            border-bottom: 1px tomato solid;
            backdrop-filter:blur(5px);
            user-select: none;
            padding: 3%;
        }
        body{
            background-color: black;
            margin: 0px;
            padding: 0px;
            color: white;
            text-align: center;
            transition: all 0.5s ease;
        }
        button{
            font-size: 1rem;
            margin: 20px 0px;
            padding:10px 40px;
            background-color: #444;
            color: white;
            border-radius: 3px;
            transition: all 0.3s ease;
            border: 2px tomato solid;
            user-select: none;
        }
        button:active{
            background-color: rgb(0, 0, 0);
            color: black;
            border: 2px white dashed;
        }
        button:hover{
            background-color: tomato;
            color: black;
            border: 2px white dashed;
        }
        #ok{
            font-size: 3rem;
            margin: 30vh 60px 13px 60px;


        }
        #panel{
            text-align: center;
            width: 50%;
            
            margin: 10px 25% 10px 25%;
            
            
        }
        #display{
            font-size: 2rem;
            transition: all 1s ease;
            background-color:#444;
            display: none;
            border-radius: 3px;
            border: 1px white solid;
            padding: 30px;
            overflow:auto;
        }
        #copy{
            color: black;
            background-color: gray;
            display: none;
            width: 100%;
            text-align: center;
            margin: 0px;
            cursor: pointer;
            font-size: 1rem;
        }
        #copy:active{
            color: white;

        }
        #copy:hover{
            background-color: tomato;
            color: black;
            font-size: 1.5rem;

        }

    </style>
</head>

<body>
    <header>Password Generator</header>
    
        <div id="cont">
            
            <button id="ok">Generate a password</button>
            <div id="panel">
            <div id="display">
                The password will be displayed here
                
            </div>
            <button id="copy">Copy</button>
        </div>
        </div>
   

    
    <script>
        var pass;
        document.getElementById("ok").onclick = function(){
            let char=["!","@","#","$","%","&","*","(",")","/","|",",","'",":",";"];
            let nums=["0","1","2","3","4","5","6","7","8","9"];
            let alphas=["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","u","v","w","x","y","z"];
            let Alphas=["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","U","V","W","X","Y","Z"];

            password(char, nums, alphas,Alphas);

            function password(char, nums, alphas, Alphas){

                function randomChar(char){
                    let lengthc=char.length;
                    let rchari=Math.floor(Math.random()*lengthc);
                    let rchar=char[rchari];
                    return rchar;
                }

                function randomNum(nums){
                    let lengthn=nums.length;
                    let rnumi=Math.floor(Math.random()*lengthn);
                    let rnum=nums[rnumi];
                    return rnum;
                }

                function randomAlpha(alphas){
                    let lengtha=alphas.length;
                    let ralphai=Math.floor(Math.random()*lengtha);
                    let ralpha=alphas[ralphai];
                    return ralpha;
                }
                function randomAlpha(Alphas){
                    let lengthA=Alphas.length;
                    let rAlphai=Math.floor(Math.random()*lengthA);
                    let rAlpha=Alphas[rAlphai];
                    return rAlpha;
                }

                pass= randomAlpha(alphas)+ randomAlpha(alphas)+randomAlpha(Alphas) +randomAlpha(alphas) + randomAlpha(alphas)+ randomChar(char)+randomChar(char)+randomNum(nums)+randomNum(nums);
                
                document.getElementById("display").innerHTML=`${pass}`;
                document.getElementById("ok").innerHTML="Generate new password";
                document.getElementById("ok").style.marginTop="20px";
                document.getElementById("ok").style.fontSize="1rem";
                document.getElementById("display").style.display="flex";
                document.getElementById("display").style.textAlign="center";
                document.getElementById("copy").style.display="flex";
                document.getElementById("copy").style.alignSelf="center";
                document.getElementById("copy").style.flexDirection="row";
                document.getElementById("copy").style.justifyContent="space-evenly";
                
            }
            document.getElementById("copy").onclick=function(){
                navigator.clipboard.writeText(pass);
                console.log("copied: "+ pass);
                document.getElementById("display").innerHTML="Password is copied to the clipboard";
                document.getElementById("copy").style.display="none";
            }
        }
    </script>
</body>
</html>